import React, { Component } from 'react'
import { Layout } from 'antd';
import CustomFooter from './components/Footer';
import Banner from './components/Banner';
import List from './components/List';
import MyHeader from './components/Header';
import Bottom from './components/Bottom';
import { Divider } from 'antd';
import { v4 as uuidv4 } from 'uuid';
import './App.css';

const { Header, Footer: AntFooter, Content } = Layout;


export default class App extends Component {
  state = {
    todoList: [],
    checkedList: [],
  }

  handleCallback = {
    onCheck: (id, checked) => {
      if (checked && !this.state.checkedList.includes(id)) {
        this.setState({
          checkedList: [...this.state.checkedList, id]
        });
      } else {
        this.setState({
          checkedList: this.state.checkedList.filter(item => item !== id)
        });
      }
    },
    onAdd: content => {
      const uniqueId = uuidv4();
      this.setState({
        todoList: [...this.state.todoList, { id: uniqueId, content }]
      });
    },
    onSelectAll: (selected) => {
      if (!selected) {
        this.setState({
          checkedList: []
        });
      } else {
        this.setState({
          checkedList: this.state.todoList.map(item => item.id)
        });
      }
    },
    onDeleteSelected: () => {
      if (!this.state.checkedList.length) {
        return;
      }
      this.setState({
        todoList: this.state.todoList.filter(item => !this.state.checkedList.includes(item.id)),
        checkedList: []
      });
    },
    onDelete: id => {
      this.setState({
        todoList: this.state.todoList.filter(item => item.id !== id),
        checkedList: this.state.checkedList.filter(item => item !== id)
      });
    }
  }

  render() {
    const { todoList, checkedList } = this.state
    const { onSelectAll, onDeleteSelected, onAdd } = this.handleCallback
    return (
      <Layout style={{ height: '100vh' }}>
        <Header>
          <Banner/>
        </Header>
        <Layout className='layout'>
          <Content style={{ width: '50%' }}>
            <MyHeader onAdd={onAdd} />
            <List list={todoList}
              checkedList={checkedList}
              {...this.handleCallback} />
            <Divider />
            <Bottom done={checkedList.length}
              total={todoList.length}
              onSelectAll={onSelectAll}
              onDeleteSelected={onDeleteSelected} />
          </Content>
        </Layout>
        <AntFooter>
          <CustomFooter />
        </AntFooter>
      </Layout>
    )
  }
}
